<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div id="app">
    <button class="btn btn-primary btn-lg" @click="handshow"> 点击显示列表 </button>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 col-md-offset-5">
                <div v-if="!goodlist.length==0">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>商品名</th>
                            <th>商品价格</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="good in goodlist">
                            <th scope="row">{{good.id}}</th>
                            <td>{{good.name}}</td>
                            <td>{{good.price}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div v-else>
                    啥也没有
                </div>
            </div>
        </div>
    </div>


</div>

</body>
<script>
    var mv = new Vue({
        el: "#app",
        data: {
            goodlist: []
        },
        methods:{
            handshow(){
                this.goodlist=[
                {"id": 1, "name": "手机", "price": 10000},
                {"id": 2, "name": "耳机", "price": 800},
                {"id": 3, "name": "手表", "price": 500},
            ]
            }
        }
    })
</script>
</html>